<template>
    <div class="views-yuyuetongji">
        <div>
            <el-form action="javascript:;" @submit="searchSubmit" inline>
                <el-form-item label="项目名称">
                    <el-input v-model="search.xiangmumingcheng"></el-input>
                </el-form-item>
                <el-form-item label="项目分类">
                    <el-select v-model="search.xiangmufenlei"
                        ><el-option label="请选择" value=""></el-option><e-select-option type="option" module="fuwufenlei" value="id" label="fenleimingcheng"></e-select-option
                    ></el-select>
                </el-form-item>
                <el-form-item label="预约时间">
                    <div style="display: flex">
                        <el-date-picker v-model="search.yuyueshijian_start" style="width: 120px" type="date" value-format="YYYY-MM-DD" placeholder="选择开始日期" />
                        -
                        <el-date-picker v-model="search.yuyueshijian_end" style="width: 120px" type="date" value-format="YYYY-MM-DD" placeholder="选择结束日期" />
                    </div>
                </el-form-item>
                <el-form-item label="预约时段">
                    <el-select v-model="search.yuyueshiduan"
                        ><el-option label="请选择" value=""></el-option><el-option label="07:00-08:00" value="07:00-08:00"></el-option>
                        <el-option label="08:00-09:00" value="08:00-09:00"></el-option>
                        <el-option label="09:00-10:00" value="09:00-10:00"></el-option>
                        <el-option label="10:00-11:00" value="10:00-11:00"></el-option>
                        <el-option label="11:00-12:00" value="11:00-12:00"></el-option>
                        <el-option label="12:00-13:00" value="12:00-13:00"></el-option>
                        <el-option label="13:00-14:00" value="13:00-14:00"></el-option>
                        <el-option label="14:00-15:00" value="14:00-15:00"></el-option>
                        <el-option label="15:00-16:00" value="15:00-16:00"></el-option>
                        <el-option label="16:00-17:00" value="16:00-17:00"></el-option>
                        <el-option label="17:00-18:00" value="17:00-18:00"></el-option>
                        <el-option label="19:00-20:00" value="19:00-20:00"></el-option>
                        <el-option label="20:00-21:00" value="20:00-21:00"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约状态">
                    <el-select v-model="search.yuyuezhuangtai"
                        ><el-option label="请选择" value=""></el-option><el-option label="待支付" value="待支付"></el-option>
                        <el-option label="待接单" value="待接单"></el-option>
                        <el-option label="已接单" value="已接单"></el-option>
                        <el-option label="已服务" value="已服务"></el-option>
                        <el-option label="已完成" value="已完成"></el-option>
                    </el-select> </el-form-item
            ></el-form>
        </div>
        <div>
            <e-container>
                <v3-echarts :options="LineOptions" width="100%" height="300px"></v3-echarts>
            </e-container>
        </div>
        <div>
            <e-container>
                <v3-echarts :options="barOptions" width="100%" height="300px"></v3-echarts>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";

    import { ref, reactive, watch, computed, unref } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { extend } from "@/utils/extend";

    const route = useRoute();

    const search = reactive({ xiangmumingcheng: "", xiangmufenlei: "", yuyueshijian_start: "", yuyueshijian_end: "", yuyueshiduan: "", yuyuezhuangtai: "" });
    extend(search, route.query);
    const serachSubmit = () => {
        loadDatabaseList();
    };
    var timer;
    watch(
        () => search,
        () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                serachSubmit();
            }, 200);
        },
        { deep: true }
    );
    const fuwuyuyueList = ref([]);
    const loadDatabaseList = async () => {
        var where = " 1=1 ";
        if (search.xiangmumingcheng) {
            where += ` AND fwy.xiangmumingcheng LIKE '%${search.xiangmumingcheng}%' `;
        }
        if (search.xiangmufenlei) {
            where += ` AND fwy.xiangmufenlei='${search.xiangmufenlei}' `;
        }
        if (search.yuyueshijian_start) {
            where += ` AND fwy.yuyueshijian>='${search.yuyueshijian_start}' `;
        }
        if (search.yuyueshijian_end) {
            where += ` AND fwy.yuyueshijian<='${search.yuyueshijian_end}' `;
        }
        if (search.yuyueshiduan) {
            where += ` AND fwy.yuyueshiduan='${search.yuyueshiduan}' `;
        }
        if (search.yuyuezhuangtai) {
            where += ` AND fwy.yuyuezhuangtai='${search.yuyuezhuangtai}' `;
        }
        fuwuyuyueList.value = await DB.name("fuwuyuyue")
            .alias("fwy")
            .joinLeft("fuwufenlei fwf", "fwy.xiangmufenlei=fwf.id")
            .field("fwf.fenleimingcheng")
            .group("fwf.fenleimingcheng")
            .field("sum(fwy.jiage) sum_jiage")
            .field("count(fwy.id) count")
            .where(where)
            .select();
    };

    loadDatabaseList();
    const LineOptions = computed(() => {
        var list = unref(fuwuyuyueList);
        return {
            title: {
                text: "预约统计",
            },
            tooltip: {
                trigger: "axis",
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: list.map((s) => s.fenleimingcheng),
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "价格",
                    type: "line",
                    stack: "Total",
                    data: list.map((s) => parseFloat(s.sum_jiage)),
                },
                {
                    name: "服务预约数量",
                    type: "line",
                    stack: "Total",
                    data: list.map((s) => parseFloat(s.count)),
                },
            ],
        };
    });

    const barOptions = computed(() => {
        var list = unref(fuwuyuyueList);
        return {
            title: {
                text: "收入占比",
                left: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}：{c},{d}%",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "价格",
                    type: "pie",
                    radius: "50%",
                    data: list.map((s) => {
                        return {
                            value: parseFloat(s.sum_jiage),
                            name: s.fenleimingcheng,
                        };
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        };
    });
</script>

<style scoped lang="scss">
    .views-yuyuetongji {
    }
</style>
